<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="添加sku" v-model="visible" class="full" append-to-body align-center
    width="1200px" @close="handleClose">
    <div class="pt-2 h-full">
      <VTable ref="tableRef" v-bind="tableOptions">
        <template #form="{ form }">
          <VGroup>
            <el-select v-model="form.supplier.type" style="width: 120px">
              <el-option label="sku" value="sku"></el-option>
              <el-option label="自定义SKU" value="custom_sku"></el-option>
            </el-select>
            <VBatchInput v-model="form.supplier.value" clearable class="w-40" @search="query" />
          </VGroup>
          <el-input v-model="form.sku_cn_title" placeholder="产品名称" class="w-36" clearable></el-input>
          <el-select v-model="form.is_new" style="width: 120px" placeholder="是否新品" multiple clearable>
            <el-option label="否" :value="1"></el-option>
            <el-option label="是" :value="2"></el-option>
          </el-select>
          <VCascader v-model="form.attribute_id" placeholder="产品分类" type="2" filterable clearable checkStrictly
            class="w-40" />
        </template>
        <template #toolbar>
          <div class="h-3"></div>
        </template>
      </VTable>
    </div>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loadings.submit" @click="submit">选 择</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import api from './api'
import { ElMessage } from 'element-plus'

const props = defineProps({
  validator: { type: Function, default: async () => false },
})
const load = ref(false)
const visible = ref(false)
let loadings = reactive({})
const tableRef = ref()
// 查询
const query = () => {
  tableRef?.value.query()
}

// 列表配置
const tableOptions = reactive({
  size: 'small',
  rowConfig: { height: 90 },
  showHeaderOverflow: true,
  formConfig: {
    data: {
      supplier: { type: 'sku' },
    }
  },
  columns: [
    { type: 'checkbox', fixed: 'left', width: 40 },
    {
      title: '图片', width: 80, slots: {
        default: ({ row }) => {
          return <VImage src={row.main_img} />
        }
      }
    },
    {
      width: 240, slots: {
        header: ({ column }) => {
          return 'sku信息'
        },
        default: ({ row }) => {
          return <div>
            <VText title='sku' value={row.sku} />
            <VText title='历史sku' value={row.sai_he_sku} />
            <VText title='产品状态' value={row.sku_status_name} />
            <VText title='是否退税' value={row.is_refund_tax_name} />
          </div>
        }
      }
    },
    {
      field: 'sku_cn_title', title: '产品名称', minWidth: 120, line: 3
    },
    {
      field: 'attribute_name', title: '产品分类', minWidth: 100, line: 3
    },
    {
      width: 180, slots: {
        header: ({ column }) => {
          return '供应商信息'
        },
        default: ({ row }) => {
          return <div>
            <VText title='供应商' value={row.supplier_name || '-'} />
            <VText title='是否开票' value={row.is_invoice_name} />
          </div>
        }
      }
    },
    {
      width: 140, slots: {
        header: ({ column }) => {
          return '采购/开发'
        },
        default: ({ row }) => {
          return <div>
            <VText value={row.purchaser_name} />
            <VText value={row.developer_name} />
          </div>
        }
      }
    },
    {
      field: 'is_combination_name', title: '是否组合sku', width: 100,
      slots: {
        default: ({ row, rowIndex }) => {
          return <div>
            <VText value={row.is_combination_name} />
            {row.combination_data && row.combination_data.length ? <VText title="子sku信息" title-position="top" line="2">
              <VMore key={rowIndex}>
                {{
                  default: () => row.combination_data.map(d => <VText value={`${d.sku}*${d.sku_num}`} />)
                }}
              </VMore>
            </VText> : ''}
          </div>
        }
      }
    },
    {
      field: 'remark', title: '备注', minWidth: 100, line: 3
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page })
    }
  }
})

const emit = defineEmits(['close', 'change'])

// 打开弹窗
const open = async (selection) => {
  if (!load.value) {
    load.value = true
  }
  loadings = reactive({})
  visible.value = true
  nextTick(() => {
    tableRef.value.resetForm()
    tableRef.value.query()
  })
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}
// 提交
const submit = async () => {
  const selection = tableRef.value.$table.getCheckboxRecords()
  if (!selection.length) {
    ElMessage.warning('请先选择行')
    return
  }
  const { validator } = props
  if (validator) {
    const msg = await validator(selection)
    if (msg) return
  }
  emit('change', selection)
  close()
}

defineExpose({ open })
</script>